<template>
    <div class="bread">
        <router-link :to="{ name: item.name }" v-for="item in data" :key="item.name">
            {{ item.meta.name }}
        </router-link>
    </div>
</template> 

<script setup>
import { watchEffect, watch, toRefs } from "vue"
//Vue3.2以后defineEmits defineProps不再需要引入了,已经在全局了
// 声明props
let props = defineProps({
    data: {
        type: Array,
        default() {
            return []
        },
    },
    separator: {
        type: String,
        default() {
            return '/'
        },
    }

})
console.log(props, 'wrw');
//1.reactive直接重新赋值是否解除响应式
//2.是否没有使用watch侦听props的变化
//3.是否watchEffect不管用
// 解构
let { data, separator } = toRefs(props)

watchEffect(() => {
    console.log(props, 'asd');
})
console.log(props);

</script>

<style scoped>
.bread {

    margin: 20px 0;
}

.bread a {
    font-size: 16px;
    font-weight: 700px;
    color: coral;
    margin: 0 5px;
}
</style>